<template>
  <div class="volunteer">
    <!-- 头部tab -->
    <div class="header-wrap">
      <span class="header-wrap-left" @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">志愿者申请</span>
      <span class="header-wrap-right"></span>
    </div>
    <div>
      <div v-if="mark">
        <!-- 如果已申请显示 -->
        <div class="swiper">
          <!-- <img src="https://pic.qqtn.com/up/2019-5/15581455226281095.jpg" alt=""> -->
        </div>
        <div class="repairDetail-list">
          <span class="list-title" style="font-size: 0.3rem">姓名</span>
          <div class="list-content">
            <van-field disabled clearable v-model="message.realname" />
          </div>
        </div>
        <div class="repairDetail-list">
          <span class="list-title" style="font-size: 0.3rem">性别</span>
          <div class="list-content" v-if="message.sex == 1">
            <van-field disabled clearable v-model="sexData[0].text" />
          </div>
          <div class="list-content" v-if="message.sex == 2">
            <van-field disabled clearable v-model="sexData[1].text" />
          </div>
        </div>
        <div class="repairDetail-list">
          <span
            class="list-title"
            style="font-size: 0.3rem; margin-top: 1.2rem; display: block"
            >政治面貌</span
          >
          <div class="list-content" v-if="message.policital == 1">
            <van-field disabled clearable v-model="relationshipData[0].text" />
          </div>
          <div class="list-content" v-if="message.policital == 2">
            <van-field disabled clearable v-model="relationshipData[1].text" />
          </div>
          <div class="list-content" v-if="message.policital == 3">
            <van-field disabled clearable v-model="relationshipData[2].text" />
          </div>
          <div class="list-content" v-if="message.policital == 4">
            <van-field disabled clearable v-model="relationshipData[3].text" />
          </div>
          <div class="list-content" v-if="message.policital == 5">
            <van-field disabled clearable v-model="relationshipData[4].text" />
          </div>
          <div class="list-content" v-if="message.policital == 6">
            <van-field disabled clearable v-model="relationshipData[5].text" />
          </div>
          <div class="list-content" v-if="message.policital == 7">
            <van-field disabled clearable v-model="relationshipData[6].text" />
          </div>
          <div class="list-content" v-if="message.policital == 8">
            <van-field disabled clearable v-model="relationshipData[7].text" />
          </div>
          <div class="list-content" v-if="message.policital == 9">
            <van-field disabled clearable v-model="relationshipData[8].text" />
          </div>
          <div class="list-content" v-if="message.policital == 10">
            <van-field disabled clearable v-model="relationshipData[9].text" />
          </div>
          <div class="list-content" v-if="message.policital == 11">
            <van-field disabled clearable v-model="relationshipData[10].text" />
          </div>
          <div class="list-content" v-if="message.policital == 12">
            <van-field disabled clearable v-model="relationshipData[11].text" />
          </div>
          <div class="list-content" v-if="message.policital == 13">
            <van-field disabled clearable v-model="relationshipData[12].text" />
          </div>
        </div>
        <div class="repairDetail-list">
          <span class="list-title" style="font-size: 0.3rem">身份证</span>
          <div class="list-content">
            <van-field disabled clearable v-model="message.id_card" />
          </div>
        </div>
        <div class="repairDetail-list">
          <span class="list-title" style="font-size: 0.3rem">邮箱</span>
          <div class="list-content">
            <van-field disabled clearable v-model="message.email" />
          </div>
        </div>
        <div class="repairDetail-list">
          <span class="list-title" style="font-size: 0.3rem">电话</span>
          <div class="list-content">
            <van-field disabled clearable v-model="message.mobile" />
          </div>
        </div>
        <!-- <div class="repairDetail-list">
          <span class="list-title" style="font-size: 0.3rem">居住地址</span>
          <div class="list-content">
            <van-field disabled clearable v-model="message.mobile" />
          </div>
        </div> -->


        <div class="repairDetail-list">
          <span class="list-title" style="font-size: 0.3rem">发布时间</span>
          <div class="list-content">
            <van-field disabled clearable v-model="message.createtime" />
          </div>
        </div>
        <div class="volunteer-content" style="margin-top: 0.7rem">
          <div class="submit" @click="addVolunteerTips">志愿者申请已提交</div>
        </div>
        <!-- 如果已申请显示 -->
      </div>
      <div v-if="show">
        <!-- 如果未申请显示 -->
        <!-- 选择社区 -->
        <div class="volunteer-content">
          <div
            class="volunteer-list"
            @click="showCommunity"
            v-if="communityName"
          >
            <span>{{ communityName }}</span>
            <span><i class="iconfont icon-xiajiantou"></i></span>
          </div>
          <div class="volunteer-list" @click="showCommunity" v-else>
            <span>请选择社区</span>
            <span><i class="iconfont icon-xiajiantou"></i></span>
          </div>
        </div>
        <!-- 输入x姓名 -->
        <div class="volunteer-content">
          <div class="volunteer-list">
            <van-field clearable v-model="name" placeholder="请输入姓名" />
          </div>
        </div>
        <!-- 选择性别 -->
        <div class="volunteer-content">
          <div class="volunteer-list" @click="showSex" v-if="sex">
            <span>{{ sex }}</span>
            <span><i class="iconfont icon-xiajiantou"></i></span>
          </div>
          <div class="volunteer-list" @click="showSex" v-else>
            <span>请选择性别</span>
            <span><i class="iconfont icon-xiajiantou"></i></span>
          </div>
        </div>
        <!-- 选择政治面貌 -->
        <div class="volunteer-content">
          <div
            class="volunteer-list"
            @click="showrelationship"
            v-if="relationship"
          >
            <span>{{ relationship }}</span>
            <span><i class="iconfont icon-xiajiantou"></i></span>
          </div>
          <div class="volunteer-list" @click="showrelationship" v-else>
            <span>请选择政治面貌</span>
            <span><i class="iconfont icon-xiajiantou"></i></span>
          </div>
        </div>


        <!-- 输入身份证 -->
        <div class="volunteer-content">
          <div class="volunteer-list">
            <van-field
              clearable
              v-model="idCard"
              placeholder="请输入身份证号"
            />
          </div>
        </div>
        <!-- 输入电子邮箱 -->
        <div class="volunteer-content">
          <div class="volunteer-list">
            <van-field  clearable v-model="email" placeholder="请输入电子邮箱" />
          </div>
        </div>
        <!-- 输入电话号码 -->
        <div class="volunteer-content">
          <div class="volunteer-list">
            <van-field
              clearable
              v-model="mobile"
              placeholder="请输入电话号码"
            />
          </div>
        </div>

        <!-- 输入地址-->
        <div class="volunteer-content">
          <div class="volunteer-list">
            <van-field clearable v-model="address" placeholder="请输入居住地址" />
          </div>
        </div>
        <!-- 确定 -->
        <div class="volunteer-content" style="margin-top: 0.7rem">
          <div class="submit" @click="addVolunteer">确定</div>
        </div>
      </div>
      <!-- 如果未申请显示 -->
    </div>
    <!-- 社区选择  -->
    <van-popup v-model="PickerCommunity" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="cancel"
        @confirm="onConfirm"
      />
    </van-popup>
    <!-- 性别选择弹窗 -->
    <van-popup v-model="PickerSex" position="bottom">
      <van-picker
        show-toolbar
        :columns="sexData"
        @cancel="cancel"
        @confirm="ConfirmSex"
      />
    </van-popup>
    <!-- 关系选择弹窗 -->
    <van-popup v-model="Pickerrelationship" position="bottom">
      <van-picker
        show-toolbar
        :columns="relationshipData"
        @cancel="cancel"
        @confirm="ConfirmRelationship"
      />
    </van-popup>
  </div>
</template>
<script>
import api from "../../api/api.js";
import { Area, Popup, Picker, Dialog, Field } from "vant";
export default {
  data() {
    return {
      show: false,
      mark: false,
      message: {},
      id: "",
      idCard: "",
      email: "",
      mobile: "",
      communityName: "",
      communityId: null,
      name: "",
      address: "",
      sex: "",
      sexId: null,
      relationship: "",
      relationshipId: null,
      PickerCommunity: false,
      PickerSex: false,
      Pickerrelationship: false,
      columns: [],
      relationshipData: [
        { text: "中共党员", value: 1 },
        { text: "中共预备党员", value: 2 },
        { text: "共青团员", value: 3 },
        { text: "民革党员", value: 4 },
        { text: "民盟盟员", value: 5 },
        { text: "民建会员", value: 6 },
        { text: "民进会员", value: 7 },
        { text: "农工党党员", value: 8 },
        { text: "致公党党员", value: 9 },
        { text: "九三学社社员", value: 10 },
        { text: "台盟盟员", value: 11 },
        { text: "无党派人士", value: 12 },
        { text: "群众", value: 13 },
      ],
      sexData: [
        { text: "男", value: 1 },
        { text: "女", value: 2 },
      ],
    };
  },
  created() {
    this.quarters();
    this.VolunteerDetail();
    this.menu();
  },
  methods: {
	formatDate (time) {
	// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var date = new Date(time * 1000) 
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? ('0' + MM) : MM
      let d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      let h = date.getHours()
      h = h < 10 ? ('0' + h) : h
      let m = date.getMinutes()
      m = m < 10 ? ('0' + m) : m
      let s = date.getSeconds()
	  s = s < 10 ? ('0' + s) : s
      this.message.createtime =  y + '年' + MM + '月' + d + '日' +" "+h+"时" + m+"分"
},
    menu() {
      window.scrollTo(0, 0);
    },
    goback() {
      this.$router.go(-1);
    },
    addVolunteer() {
      var reg = /^([1][0-9]{10})$/;
      var reg1 = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      var regPartton = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/;
      if (!this.name) {
        this.$toast("请输入姓名");
        return;
      }
      if (!this.sex) {
        this.$toast("请选择性别");
        return;
      }
      if (!this.relationship) {
        this.$toast("请选择政治面貌");
        return;
      }
      if (!this.idCard) {
        this.$toast("请输入身份证号");
        return;
      }
      if(!regPartton.test(this.idCard)){
        this.$toast('身份证格式不正确')
        return
      }
      if (!this.email) {
        this.$toast("请输入电子邮箱");
        return;
      }
      if (!reg1.test(this.email)) {
        this.$toast("请输入有效邮箱");
        return;
      }
      if (!this.mobile) {
        this.$toast("请输入手机号");
        return;
      }
      if (!reg.test(this.mobile)) {
        this.$toast("手机格式不正确");
        return;
      }

      if (!this.address) {
        this.$toast("请输入居住地址");
        return;
      }
      this.$post(api.addVolunteer, {
        community_id: this.communityId,
        realname: this.name,
        sex: this.sexId,
        policital: this.relationshipId,
        id_card: this.idCard,
        mobile: this.mobile,
        email: this.email,
        address: this.address,
      })
        .then((response) => {
          if (response.data.code === 1) {
            this.$toast("添加成功!");
            setTimeout(() => {
              window.location.reload();
            }, 2000);
          } else {
            this.$toast(response.data.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    addVolunteerTips() {
      this.$toast("志愿者申请已提交");
    },
    //获取社区
    quarters() {
      this.$get(api.communityList, {})
        .then((response) => {
          if (response.data.code == 1) {
            this.columns = response.data.data.list;
            this.columns.forEach((element, index) => {
              this.columns[index].text = element.name;
              this.columns[index].textId = element.id;
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //获取志愿者详情
    VolunteerDetail() {
      this.$get(api.VolunteerDetail, {})
        .then((response) => {
          if (response.data.code == 1) {
			this.message = response.data.data;
            if (this.message.id) {
			  this.mark = true;
			  this.formatDate(response.data.data.createtime)
            } else {
              this.show = true;
            }
          }else{
			  this.show = true;
		  }
        })
    },
    cancel() {
      this.PickerSex = false;
      this.Pickerrelationship = false;
      this.PickerCommunity = false;
    },
    // 性别确定FN
    showSex() {
      this.PickerSex = true;
    },
    // 关系确定FN
    showrelationship() {
      this.Pickerrelationship = true;
    },
    showCommunity() {
      this.PickerCommunity = true;
    },
    // 社区确定FN
    onConfirm(value) {
      this.communityName = value.text;
      this.communityId = value.id;
      this.PickerCommunity = false;
    },
    ConfirmSex(value) {
      this.sex = value.text;
      this.sexId = value.value;
      this.PickerSex = false;
    },
    ConfirmRelationship(value) {
      this.relationship = value.text;
      this.relationshipId = value.value;
      this.Pickerrelationship = false;
    },
  },
  components: {
    [Area.name]: Area,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Field.name]: Field,
    [Dialog.Component.name]: Dialog.Component,
  },
};
</script>
<style>
.volunteer .volunteer-list .van-cell {
  background: none;
  color: #000;
  line-height: 0.55rem;
  padding: 0.24rem 0.3rem;
}
.volunteer .van-field__control {
  font-size: 0.28rem;
}
</style>

<style scoped>
.volunteer {
  margin-top: 1rem;
}
.list-content {
  display: flex;
  margin: 0.15rem 0.2rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 0.45rem;
  font-weight: bold;
}
.list-content span {
  flex: 1;
}
.volunteer .repairDetail-list {
  margin-bottom: 0.2rem;
  font-weight: bold;
}
.volunteer .repairDetail-list .van-cell {
  background: none;
  padding: 0.26rem 0.3rem;
}
.volunteer .repairDetail-textarea .van-cell {
  background: #2e294e;
  padding: 0.15rem 0.15rem;
  border: 1px solid #57c5c6;
  border-radius: 0.2rem;
}
.list-title {
  margin-left: 0.3rem;
}
.van-dialog {
  width: 75%;
}
.volunteer-content {
  padding: 0.35rem 0.3rem;
  color: #000;
  font-weight: bold;
}
.volunteer-title {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.32rem;
}
.volunteer-list {
  background: #fff;
  display: flex;
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  border-radius: 0.5rem;
  border: 0.02rem solid #ddd;
}
.volunteer-list span:nth-of-type(1) {
  text-indent: 0.35rem;
  flex: 4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.volunteer-list span:nth-of-type(2) {
  text-align: center;
  flex: 1;
}
.submit {
  color: #fff;
  height: 1rem;
  line-height: 1rem;
  border-radius: 0.5rem;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(90deg, #ffc796 0%, #fd5585 100%);
  border-radius: 0.45rem;
  text-align: center;
  font-weight: bold;
}
.noticeDetail-tips {
  margin: 0 0.5rem;
}
.noticeDetail-tips span {
  line-height: 0.8rem;
  display: block;
  border-bottom: 1px solid #ccc;
}
</style>


